<template>
  <span class="tree-select">
    <el-button style="width: 100%;height: 40px;" v-popover:tree>{{ echoLabel || '' }}</el-button>
    <el-popover
      ref="tree"
      placement="top"
      width="600"
      v-model="treeVisible"
      top="0"
      trigger="click">
      <el-tree
        :default-expanded-keys="expendKeys"
        :data="popTreeData"
        @node-click="handleNodeClick"></el-tree>
    </el-popover>
  </span>
</template>
<script>
export default {
  props: {
    treeData: {
      type: Array,
      require: true
    },
    expendKeys: {
      type: Array
    },
    // 本行的所有数据，此字段不需要额外配置
    scope: {
      default: null
    },
    // 回显的时候分类名
    categoryName: {
      type: String
    }
  },
  computed: {
    popTreeData () {
      return this.treeData && this.treeData.length > 0 ? this.treeData : []
    },
    echoLabel () {
      return this.selectedNode || this.categoryName
    }
  },
  mounted () {
    this.selectedNode = this.categoryName
  },
  data () {
    return {
      selectedNode: null,
      treeVisible: false
    }
  },
  methods: {
    handleNodeClick (data) {
      this.selectedNode = data.label
      if (!this.children) {
        this.treeVisible = false
      }
      console.log('当前的数据为：', data)
      this.$emit('input', data.id)
    }
  }
}
</script>
<style>
  .tree-select .el-button {
    text-align: left;
    padding-left: 15px;
  }
</style>
